<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>图书管理系统</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="/assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
    <link href="/assets/css/bui-min.css" rel="stylesheet" type="text/css" />
    <link href="/assets/css/main-min.css" rel="stylesheet" type="text/css" />
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 配置Tailwind颜色 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#9D8DF1', // 主色调：淡紫色
                        secondary: '#B79CED', // 次要色：淡紫色渐变
                        tertiary: '#D6C6FF', // 第三色：更淡的紫色
                        light: '#F5F3FF', // 浅色背景
                        dark: '#3F3F46', // 深色文本
                        success: '#86EFAC', // 成功状态
                        warning: '#FDE68A', // 警告状态
                        danger: '#FCA5A5', // 危险状态
                    },
                    fontFamily: {
                        inter: ['Inter', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .sidebar-item-active {
                @apply bg-primary/10 text-primary border-l-4 border-primary;
            }
            .hover-scale {
                @apply transition-transform duration-200 hover:scale-105;
            }
            .hover-lift {
                @apply transition-all duration-300 hover:-translate-y-1 hover:shadow-lg;
            }
            .card-gradient {
                @apply bg-gradient-to-br from-white to-background;
            }
            .text-balance {
                text-wrap: balance;
            }
            .glass-effect {
                @apply bg-white/70 backdrop-blur-md;
            }
            .card-shadow {
                @apply shadow-[0_4px_20px_-5px_rgba(157,141,241,0.2)];
            }
            .btn-shadow {
                @apply shadow-[0_4px_15px_-5px_rgba(157,141,241,0.4)];
            }
        }
    </style>

    <style>
        /* 基础动画 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }

        .animate-fade-in {
            animation: fadeIn 0.5s ease-out forwards;
        }

        .animate-pulse-slow {
            animation: pulse 3s ease-in-out infinite;
        }

        /* 自定义滚动条 */
        ::-webkit-scrollbar {
            width: 4px;
            height: 4px;
        }

        ::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 10px;
        }

        ::-webkit-scrollbar-thumb {
            background: #D6C6FF;
            border-radius: 10px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #9D8DF1;
        }

        /* 基础样式覆盖 */
        body {
            background-color: #F9FAFF;
            background-image:
                    radial-gradient(circle at 10% 20%, rgba(157, 141, 241, 0.05) 0%, transparent 20%),
                    radial-gradient(circle at 80% 60%, rgba(157, 141, 241, 0.05) 0%, transparent 20%);
            background-attachment: fixed;
            font-family: 'Inter', sans-serif;
        }

        .header {
            background: linear-gradient(90deg, rgba(157, 141, 241, 0.9) 0%, rgba(183, 156, 237, 0.9) 100%);
            color: white;
            box-shadow: 0 4px 12px rgba(157, 141, 241, 0.1);
            backdrop-filter: blur(8px);
        }

        .dl-title {
            font-weight: 600;
            letter-spacing: 0.5px;
        }

        .dl-title span {
            font-size: 0.85rem;
            opacity: 0.8;
        }

        .dl-log {
            color: white;
            opacity: 0.9;
        }

        .dl-log a {
            color: white;
            opacity: 0.8;
            transition: opacity 0.2s ease;
        }

        .dl-log a:hover {
            opacity: 1;
        }

        /* 侧边栏 */
        .dl-main-nav {
            background-color: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(10px);
            border-right: 1px solid rgba(214, 198, 255, 0.3);
            box-shadow: 2px 0 10px rgba(0, 0, 0, 0.02);
        }

        .nav-item {
            border-bottom: 1px solid rgba(214, 198, 255, 0.1);
        }

        .nav-item.dl-selected,
        .nav-item:hover {
            background-color: rgba(214, 198, 255, 0.15);
        }

        .nav-item-inner {
            color: #3F3F46;
            padding: 12px 15px;
            display: flex;
            align-items: center;
            gap: 10px;
            transition: all 0.2s ease;
        }

        .nav-item.dl-selected .nav-item-inner {
            color: #9D8DF1;
            font-weight: 500;
        }

        /* 内容区域 */
        .dl-tab-conten {
            background-color: transparent;
            padding: 20px;
        }

        /* 页脚 */
        .footer {
            background: linear-gradient(90deg, rgba(157, 141, 241, 0.8) 0%, rgba(183, 156, 237, 0.8) 100%);
            color: white;
            text-align: center;
            padding: 12px 0;
            font-size: 0.9rem;
            box-shadow: 0 -4px 12px rgba(157, 141, 241, 0.1);
            backdrop-filter: blur(8px);
        }

        /* 自定义菜单样式 */
        .bui-tree-item-selected {
            background-color: rgba(214, 198, 255, 0.15);
            color: #9D8DF1;
            font-weight: 500;
        }

        .bui-tree-item:hover {
            background-color: rgba(214, 198, 255, 0.08);
        }

        /* 按钮样式 */
        .bui-button {
            background: linear-gradient(135deg, #9D8DF1 0%, #B79CED 100%);
            border: none;
            color: white;
            border-radius: 6px;
            transition: all 0.2s ease;
            box-shadow: 0 4px 15px -5px rgba(157, 141, 241, 0.4);
        }

        .bui-button:hover {
            background: linear-gradient(135deg, #B79CED 0%, #9D8DF1 100%);
            transform: translateY(-1px);
            box-shadow: 0 6px 20px -5px rgba(157, 141, 241, 0.5);
        }

        .bui-button:active {
            transform: translateY(0);
            box-shadow: 0 2px 10px -5px rgba(157, 141, 241, 0.5);
        }

        /* 表格样式 */
        .bui-grid-header {
            background-color: rgba(214, 198, 255, 0.1);
            color: #3F3F46;
            font-weight: 500;
            border-bottom: 1px solid rgba(214, 198, 255, 0.2);
        }

        .bui-grid-row-alt {
            background-color: rgba(214, 198, 255, 0.05);
        }

        .bui-grid-row:hover {
            background-color: rgba(214, 198, 255, 0.1);
        }

        /* 数据卡片 */
        .data-card {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(10px);
            border-radius: 12px;
            padding: 15px;
            box-shadow: 0 4px 20px -5px rgba(157, 141, 241, 0.2);
            border: 1px solid rgba(214, 198, 255, 0.3);
            transition: all 0.3s ease;
        }

        .data-card:hover {
            box-shadow: 0 8px 30px -5px rgba(157, 141, 241, 0.3);
            transform: translateY(-2px);
        }

        .card-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: rgba(214, 198, 255, 0.3);
            color: #9D8DF1;
            margin-bottom: 10px;
        }

        /* 统计图表 */
        .chart-container {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(10px);
            border-radius: 12px;
            padding: 15px;
            box-shadow: 0 4px 20px -5px rgba(157, 141, 241, 0.2);
            border: 1px solid rgba(214, 198, 255, 0.3);
        }

        /* 响应式布局 */
        @media (max-width: 768px) {
            .dl-main-nav {
                width: 100%;
                border-right: none;
                border-bottom: 1px solid rgba(214, 198, 255, 0.3);
            }

            .dl-tab-conten {
                padding: 15px;
            }

            .nav-item {
                border-bottom: none;
            }

            .nav-item-inner {
                padding: 10px 15px;
            }
        }
    </style>
</head>
<body>

<div class="header flex items-center justify-between px-4 py-3">
    <div class="dl-title flex items-center gap-2">
        <div class="h-8 w-8 rounded-lg bg-white/20 flex items-center justify-center">
            <i class="fa fa-book text-white text-xl"></i>
        </div>
        <span class="font-bold text-xl">图书管理系统</span>
        <span class="text-sm opacity-80 ml-2">Library Management System</span>
    </div>
    <div class="dl-log flex items-center gap-3">
        <div class="flex items-center gap-2">
            <i class="fa fa-user-circle-o"></i>
            <span class="dl-log-user" th:text="${session.user.username}"></span>
        </div>
        <a href="/user/logout" title="退出系统" class="dl-log-quit hover:underline transition-all">
            <i class="fa fa-sign-out mr-1"></i>退出
        </a>
    </div>
</div>

<div class="content flex">
    <div class="dl-main-nav w-64">
        <div class="dl-inform py-3 px-4 bg-background/80">
            <div class="dl-inform-title flex items-center justify-between">
                <span class="text-sm font-medium text-dark/70">快速导航</span>
                <s class="dl-inform-icon dl-up text-primary"></s>
            </div>
        </div>
        <ul id="J_Nav" class="nav-list">
            <li class="nav-item dl-selected">
                <div class="nav-item-inner nav-home flex items-center gap-3">
                    <i class="fa fa-home"></i>
                    <span>系统管理</span>
                </div>
            </li>
            <li class="nav-item hover:bg-background/50 transition-colors">
                <div class="nav-item-inner nav-book flex items-center gap-3">
                    <i class="fa fa-book"></i>
                    <span>书籍管理</span>
                </div>
            </li>
            <li class="nav-item hover:bg-background/50 transition-colors">
                <div class="nav-item-inner nav-user flex items-center gap-3">
                    <i class="fa fa-users"></i>
                    <span>用户管理</span>
                </div>
            </li>
            <li class="nav-item hover:bg-background/50 transition-colors">
                <div class="nav-item-inner nav-borrow flex items-center gap-3">
                    <i class="fa fa-exchange"></i>
                    <span>借阅管理</span>
                </div>
            </li>
            <li class="nav-item hover:bg-background/50 transition-colors">
                <div class="nav-item-inner nav-statistics flex items-center gap-3">
                    <i class="fa fa-bar-chart"></i>
                    <span>统计分析</span>
                </div>
            </li>
        </ul>
    </div>

    <div id="J_NavContent" class="dl-tab-conten flex-1">
        <!-- 页面内容将在这里动态加载 -->
        <div class="animate-fade-in">
            <!-- 页面标题 -->
            <div class="mb-6">
                <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-dark mb-2">系统管理</h2>
                <p class="text-dark/60">欢迎回来，<span th:text="${session.user.username}"></span>！这里是图书管理系统的管理控制台。</p>
            </div>

            <!-- 数据概览卡片 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
                <div class="data-card hover-lift">
                    <div class="card-icon">
                        <i class="fa fa-book text-xl"></i>
                    </div>
                    <h3 class="font-semibold text-dark">总藏书量</h3>
                    <p class="text-2xl font-bold text-primary mt-1" id="total-books">0</p>
                    <p class="text-xs text-dark/50 mt-2">较上月 <span class="text-green-500">↑ 12%</span></p>
                </div>

                <div class="data-card hover-lift">
                    <div class="card-icon">
                        <i class="fa fa-users text-xl"></i>
                    </div>
                    <h3 class="font-semibold text-dark">注册用户</h3>
                    <p class="text-2xl font-bold text-primary mt-1" id="total-users">0</p>
                    <p class="text-xs text-dark/50 mt-2">较上月 <span class="text-green-500">↑ 8%</span></p>
                </div>

                <div class="data-card hover-lift">
                    <div class="card-icon">
                        <i class="fa fa-exchange text-xl"></i>
                    </div>
                    <h3 class="font-semibold text-dark">借阅中</h3>
                    <p class="text-2xl font-bold text-primary mt-1" id="borrowing">0</p>
                    <p class="text-xs text-dark/50 mt-2">较上月 <span class="text-red-500">↓ 3%</span></p>
                </div>

                <div class="data-card hover-lift">
                    <div class="card-icon">
                        <i class="fa fa-calendar-check-o text-xl"></i>
                    </div>
                    <h3 class="font-semibold text-dark">今日归还</h3>
                    <p class="text-2xl font-bold text-primary mt-1" id="today-returns">0</p>
                    <p class="text-xs text-dark/50 mt-2">较昨日 <span class="text-green-500">↑ 5%</span></p>
                </div>
            </div>

            <!-- 图表区域 -->
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-6">
                <div class="chart-container lg:col-span-2">
                    <div class="flex justify-between items-center mb-4">
                        <h3 class="font-semibold text-dark">借阅趋势</h3>
                        <div class="text-xs text-dark/50">过去30天</div>
                    </div>
                    <div class="h-64">
                        <!-- 图表将在这里动态加载 -->
                        <div class="w-full h-full flex items-center justify-center text-dark/30">
                            <i class="fa fa-bar-chart text-3xl mr-2"></i>
                            <span>加载中...</span>
                        </div>
                    </div>
                </div>

                <div class="chart-container">
                    <div class="flex justify-between items-center mb-4">
                        <h3 class="font-semibold text-dark">书籍分类</h3>
                        <div class="text-xs text-dark/50">按类别统计</div>
                    </div>
                    <div class="h-64">
                        <!-- 图表将在这里动态加载 -->
                        <div class="w-full h-full flex items-center justify-center text-dark/30">
                            <i class="fa fa-pie-chart text-3xl mr-2"></i>
                            <span>加载中...</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 最近借阅记录 -->
            <div class="bg-white/70 rounded-12 shadow-sm backdrop-blur-md border border-D6C6FF/30">
                <div class="p-4 border-b border-D6C6FF/30">
                    <h3 class="font-semibold text-dark">最近借阅记录</h3>
                </div>
                <div class="p-4">
                    <!-- 表格将在这里动态加载 -->
                    <div class="w-full overflow-x-auto">
                        <table class="w-full">
                            <thead>
                            <tr class="bg-background/50">
                                <th class="py-2 px-3 text-left text-sm font-medium text-dark/70">书籍名称</th>
                                <th class="py-2 px-3 text-left text-sm font-medium text-dark/70">借阅人</th>
                                <th class="py-2 px-3 text-left text-sm font-medium text-dark/70">借阅日期</th>
                                <th class="py-2 px-3 text-left text-sm font-medium text-dark/70">应还日期</th>
                                <th class="py-2 px-3 text-left text-sm font-medium text-dark/70">状态</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr class="border-b border-D6C6FF/20">
                                <td class="py-2 px-3 text-sm">《Java编程思想》</td>
                                <td class="py-2 px-3 text-sm">张三</td>
                                <td class="py-2 px-3 text-sm">2023-06-10</td>
                                <td class="py-2 px-3 text-sm">2023-07-10</td>
                                <td class="py-2 px-3 text-sm"><span class="px-2 py-1 bg-success/20 text-green-700 rounded-full text-xs">借阅中</span></td>
                            </tr>
                            <tr class="border-b border-D6C6FF/20">
                                <td class="py-2 px-3 text-sm">《算法导论》</td>
                                <td class="py-2 px-3 text-sm">李四</td>
                                <td class="py-2 px-3 text-sm">2023-06-08</td>
                                <td class="py-2 px-3 text-sm">2023-07-08</td>
                                <td class="py-2 px-3 text-sm"><span class="px-2 py-1 bg-success/20 text-green-700 rounded-full text-xs">借阅中</span></td>
                            </tr>
                            <tr class="border-b border-D6C6FF/20">
                                <td class="py-2 px-3 text-sm">《数据结构》</td>
                                <td class="py-2 px-3 text-sm">王五</td>
                                <td class="py-2 px-3 text-sm">2023-06-05</td>
                                <td class="py-2 px-3 text-sm">2023-07-05</td>
                                <td class="py-2 px-3 text-sm"><span class="px-2 py-1 bg-warning/20 text-yellow-700 rounded-full text-xs">即将到期</span></td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="footer">
    <p>© 2025 图书管理系统 | 版权所有</p>
</div>

<script type="text/javascript" src="/assets/js/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="/assets/js/bui-min.js"></script>
<script type="text/javascript" src="/assets/js/common/main-min.js"></script>
<script type="text/javascript" src="/assets/js/config-min.js"></script>
<script>
    // 模拟数据加载动画
    $(document).ready(function() {
        // 为数据卡片添加数字递增动画
        function animateValue(id, start, end, duration) {
            var obj = document.getElementById(id);
            var startTimestamp = null;
            var step = function(timestamp) {
                if (!startTimestamp) startTimestamp = timestamp;
                var progress = Math.min((timestamp - startTimestamp) / duration, 1);
                obj.innerHTML = Math.floor(progress * (end - start) + start).toLocaleString();
                if (progress < 1) {
                    window.requestAnimationFrame(step);
                }
            };
            window.requestAnimationFrame(step);
        }

        // 模拟数据加载
        setTimeout(() => {
            animateValue("total-books", 0, 12456, 1500);
            animateValue("total-users", 0, 3258, 1500);
            animateValue("borrowing", 0, 876, 1500);
            animateValue("today-returns", 0, 42, 1500);
        }, 500);

        // 初始化页面
        BUI.use('common/main', function() {
            var config = [{
                id: '1',
                menu: [{
                    text: '书籍管理',
                    items: [
                        {id: '12', text: '书籍查询', href: '/book/list/1'},
                        {id: '3', text: '书籍借阅', href: '/borrow/list'},
                        {id: '4', text: '书籍归还', href: '/back/list'}
                    ]
                }]
            }];

            new PageUtil.MainPage({
                modulesConfig: config
            });
        });
    });
</script>
</body>
</html>